<template>
	<div class="system-user-container">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-date-picker
					v-model="searchObj.createTime"
					type="daterange"
					default-time="00:00:00"
					range-separator="至 "
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
				&nbsp;
				<el-input  placeholder="请输入用户名" prefix-icon="el-icon-search" style="max-width: 180px;" v-model="searchObj.name"/>
				<el-button size="small" type="primary" class="ml10"  @click="fetchData">查询</el-button>
				<el-button size="small" type="danger" @click="resetData()">清空</el-button>
			</div>
			<el-table :data="tableData.data" stripe style="width: 100%">
				<el-table-column type="index" label="序号" width="70px" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
				<!-- <el-table-column label="头像" show-overflow-tooltip>
					<template #default="scope">
						<el-image class="system-user-photo" :src="scope.row.photo" :preview-src-list="[scope.row.photo]"> </el-image>
					</template>
				</el-table-column> -->
				<el-table-column prop="nickName" label="昵称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="phone" label="手机" show-overflow-tooltip></el-table-column>
				<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
				<!-- <el-table-column prop="sex" label="性别" show-overflow-tooltip></el-table-column> -->
				<el-table-column prop="param.statusString" label="状态" show-overflow-tooltip></el-table-column>
				<el-table-column prop="param.authStatusString" label="认证状态" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createTime" label="加入时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="path" label="操作" width="250">
					<template v-slot="scope">
						<router-link :to="{name: 'showInfo', params: { id: scope.row.id}}">
						    <el-button  type="success"  size="mini">查看</el-button>
						</router-link>
						<el-button v-if="scope.row.status === 1" type="primary" size="mini" @click="lock(scope.row.id, 0)" style='margin-left: 10px;'>已锁定</el-button>
						<el-button v-if="scope.row.status ===0" type="danger" size="mini" @click="lock(scope.row.id, 1)" style='margin-left: 10px;'>不锁定</el-button>
						<el-button v-if="scope.row.authStatus !=2" type="success" size="mini" @click="switchAuthStatus(scope.row.id,scope.row.authStatus)">同意认证</el-button>
						<el-button v-else type="danger" size="mini" @click="switchAuthStatus(scope.row.id,scope.row.authStatus)">取消认证</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="changeSize"
				@current-change="fetchData"
				class="mt15"
				:current-page="page"
				background
				:page-size="limit"
				layout="sizes, prev, pager, next, jumper, ->, total, slot"
				:total="total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { fetchList,lockStatus ,switchAuth} from '/@/api/user'
const map = new Map([
	[-1, false],
	[0, false],
	[1, false],
	[2, true]
]);
export default defineComponent({
	name: 'userList',
	setup() {
		const state: any = reactive({
			page:1,
			limit:5,
			total:0,
			authStatus:false,
			searchObj:<any>{},
			tableData: {
				data: [],
				loading: false,
			},
		});
		// 锁定
		const lock=(id:number, status:number)=> {
			ElMessageBox.confirm('确定该操作吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => { // promise
					// 点击确定，远程调用ajax
				lockStatus(id, status).then( (response:any) => {
					fetchData(state.page)
					if (response.code) {
						ElMessage.success('操作成功!')
					}
				})
			})
		}
		// 调用api层获取数据库中的数据
		const fetchData=(page ?:number) =>{
			console.log('翻页。。。' + page)
			// 异步获取远程数据（ajax）
			if((<number>page)>0){
				state.page = page
			}
			let arr=state.searchObj
			fetchList(state.page, state.limit, state.searchObj).then(
				(response:any )=> {
				state.tableData.data = response.data.records
				state.total = response.data.total
				// 数据加载并绑定成功
				state.tableData.loading = false
			}
			)
		}
		// 当页码发生改变的时候
		const changeSize=(size:number)=> {
			console.log(size)
			state.limit = size
			fetchData()
		}
		// 重置查询表单
		const resetData=()=>{
			console.log('重置查询表单')
			state.searchObj = {}
			fetchData()
		}
		const switchAuthStatus=(id:number,authstatus:number)=>{
			let status=-1
			if (!map.get(authstatus)){
				status=2
			}
			ElMessageBox.confirm('操作?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => { // promise
				// 点击确定，远程调用ajax
				switchAuth(id, status).then( (response:any) => {
					fetchData(state.page)
					if (response.code) {
						ElMessage.success('操作成功!')
					}
				})
			})
		}
		// 页面加载时
		onMounted(() => {
			fetchData(1);
		});
		return {
			...toRefs(state),
			fetchData,
			changeSize,
			resetData,
			lock,
			switchAuthStatus
		};
	},
});
</script>

<style scoped lang="scss">
.system-user-container {
	.system-user-search {
		text-align: right;
	}
	.system-user-photo {
		width: 40px;
		height: 40px;
		border-radius: 100%;
	}
}
</style>
